<template>
	<view class="kindDetail">
		<view class="list dFlex jBetween_aStart fWap">
			<view class="shopOne" v-for="(item,index) in list" :key='index' @tap='lookDetail(item.productId)'>
				<view class="shopImg imgPublic dFlex jCenter_aCenter">
					<image :src="item.list_img" mode="widthFix"></image>
				</view>
				<view class="shopInfo">
					<view class="infoName">{{item.product_name}}</view>
					<view class="count dFlex jBetween_aCenter">
						<view>
							<text>已售{{item.sell_count}}</text>
							<text style="display: inline-block;margin-left: 8px;">默认: {{item.specs_name}}</text>
						</view>
						<view class="carIcon imgPublic dFlex jCenter_aCenter">
							<image src="https://wx.gdxixiashi.com/public/images/kind/car.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="tool dFlex jBetween_aCenter">
						<view class="showPrice dFlex jStart_aCenter">
							<view class="price">￥{{item.sell_price}}</view>
							<view class="openVIP" v-if='is_show != "2"'>会员价: ￥{{item.vip_price}}</view>
							<view class="openVIP" v-if='gradeId == "1" && is_show != "2"' @tap.stop='openVIP'>开通VIP</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="seat"></view>
		<!-- <view class="btns dFlex jBetween_aCenter">
			<view class="resule dFlex jStart_aCenter">
				<view class="resIcon imgPublic">
					<image src="https://wx.gdxixiashi.com/public/images/kind/icons_cart@2x.png" mode="widthFix"></image>
				</view>
				<view class="info">
					<view class="prices">
						<text class="nowPrice">￥289</text>
						<text class="oldPrice">￥299</text>
					</view>
					<view class="anzhuang">安装费￥0</view>
				</view>
			</view>
			<view class="jiesuan">结算</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				styleId:'',//分类id
				type:'',
				gradeId:'1',
				is_show:'2',
				page:1,
				load:false,
				list:[],
			};
		},
		onLoad(e) {
			this.styleId = e.styleId;
			this.type = e.type ? e.type : '1';
			this.initData();
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page++;
				this.initData();
			}
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			// 开通会员
			openVIP(){
				uni.navigateTo({
					url:'/person/vip',
					fail:(err)=>{
						console.log(err);
					}
				})
			},
			initData(){
				this.tool.getData('Product/goodsList',{
					page:this.page,
					keyword:'',
					styleId:this.styleId,
					memberId:uni.getStorageSync('userId')?uni.getStorageSync('userId'):'',
					device:getApp().globalData.platform,
					// #ifdef MP-WEIXIN
					platform:'mini',
					// #endif
					// #ifdef APP-PLUS
					platform:'APP',
					// #endif
					type:this.type,
				}).then(res=>{
					console.log(res);
					if(res){
						this.gradeId = res.gradeId;
						this.is_show = res.is_show;
						this.list = this.page == 1?res.list:this.list.concat(res.list);
						this.load = res.list.length>=10?true:false;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 商品详情
			lookDetail(productId){
				uni.navigateTo({
					url:"./shopDetail?productId="+productId,
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: white;
	}
	.kindDetail{
		width: 100%;
		padding: 12px 3%;
		box-sizing: border-box;
		.btns{
			width: 100%;
			position: fixed;
			bottom: 0;
			left:0;
			background: white;
			padding: 4px 3%;
			box-sizing: border-box;
			.resule{
				flex: 1;
				.info{
					flex: 1;
					color: #999999;
					font-size: 12px;
					.prices{
						width: 100%;
						margin-bottom: 2px;
						.nowPrice{
							font-size: 18px;
							font-weight: bold;
							color: #333333;
							margin-right: 4px;
						}
					}
				}
				.resIcon{
					width: 60px;
					height: 60px;
				}
			}
			.jiesuan{
				width: 30%;
				color: white;
				font-weight: bold;
				background: linear-gradient(#609ff8 0%, #1664ff 100%);
				border-radius: 50px;
				padding: 8px 0;
				text-align: center;
			}
		}
		.list{
			width: 100%;
			.shopOne{
				width: 100%;
				margin-bottom: 15px;
				.shopInfo{
					width: 100%;
					padding:10px;
					box-sizing: border-box;
					.tool{
						color: #F95822;
						font-size: 15px;
						font-weight: bold;
						.showPrice{
							flex: 1;
							.openVIP{
								margin-left: 12px;
								color:#997848;
								font-size: 14px;
								font-weight: 400;
							}
						}
						
					}
					.count{
						font-size: 12px;
						color: #999999;
						.carIcon{
							width: 30px;
							height: 30px;
							margin-left: 12px;
							border-radius: 50%;
							padding: 6px;
							box-sizing: border-box;
							background: linear-gradient(#609ff8 0%, #1664ff 100%);
						}
					}
				}
				.shopImg{
					width:100%;
					overflow: hidden;
					border-radius: 5px;
				}
			}
		}
	}
</style>
